<template>
  <table class="my-table">
    <tr>
      <td rowspan="4">病 <br />情</td>
      <td>意识状态</td>
      <td>
        <el-radio-group v-model="form.yishi">
          <el-radio label="神志清醒"></el-radio>
          <el-radio label="嗜睡"></el-radio>
          <el-radio label="浅昏迷"></el-radio>
          <el-radio label="中昏迷"></el-radio>
          <el-radio label="深昏迷"></el-radio>
          <el-radio label="药物镇静"></el-radio>
          <el-radio label="其他(无反应觉醒状态)"></el-radio>
        </el-radio-group>
      </td>
    </tr>
    <tr>
      <td rowspan="2">瞳孔</td>
      <td>
        <div class="flexBox">
          <span> 左：( <el-input v-model="form.weight"></el-input>)mm </span>
          <span class="margL"> 对光反射</span>
          <el-radio-group v-model="form.yishi">
            <el-radio label="灵敏"></el-radio>
            <el-radio label="迟钝"></el-radio>
            <el-radio label="消失"></el-radio>
          </el-radio-group>
        </div>
      </td>
    </tr>

    <tr>
      <td>
        <div class="flexBox">
          <span> 右：( <el-input v-model="form.weight"></el-input>)mm </span>
          <span class="margL"> 对光反射</span>
          <el-radio-group v-model="form.yishi">
            <el-radio label="灵敏"></el-radio>
            <el-radio label="迟钝"></el-radio>
            <el-radio label="消失"></el-radio>
          </el-radio-group>
        </div>
      </td>
    </tr>
    <tr>
      <td>生命体征</td>
      <td>
        T: ( <el-input v-model="form.vitalSignst" style="width: 30px"></el-input>)
        ℃（最后一次常规体温）
        <span class="paddL">
          P: <el-input v-model="form.vitalSignsp" style="width: 26px"></el-input> 次/分
          <span class="paddL">
            R:
            <el-input v-model="form.vitalSignsr" style="width: 30px"></el-input>
            次/分</span
          >
        </span>
        <span class="paddL">
          SPO2:
          <el-input v-model="form.vitalSignsr" style="width: 30px"></el-input>%
        </span>

        <span class="paddL">
          BP:
          <el-input v-model="form.vitalSignsbp1" style="width: 26px"></el-input>
          /
          <el-input v-model="form.vitalSignsbp2" style="width: 26px"></el-input>
          mmHg
        </span>

        <span style="padding-left: 10px"></span>
        疼痛：
        <el-input v-model="form.vitalSignspain"></el-input>
      </td>
    </tr>
  </table>
  <div class="signature">
    <div class="tear-line">请沿此线撕下，上联交予家属，下联监护室保留</div>
  </div>
  <table class="my-table">
    <tr>
      <td>出院指导</td>
      <td>
        <el-radio-group v-model="form.yaopin">
          <el-radio label="无"></el-radio>
          <el-radio label="有">有</el-radio>
        </el-radio-group>
      </td>
      <td rowspan="3" colspan="3">
        满意度： 您对重症医学科的护理工作是否满意：
        <el-radio-group v-model="form.yaopin">
          <el-radio label="无"></el-radio>
          <el-radio label="有">有</el-radio>
        </el-radio-group>
        您对重症医学科工作有何意见：
      </td>
    </tr>

    <tr>
      <td>病人物品齐全</td>
      <td rowspan="2">
        <el-radio-group v-model="form.yaopin">
          <el-radio label="无"></el-radio>
          <el-radio label="有">有</el-radio>
        </el-radio-group>
      </td>
    </tr>

    <tr>
      <td>
        带出药品交接
        <el-radio-group v-model="form.yaopin">
          <el-radio label="无"></el-radio>
          <el-radio label="有">有</el-radio>
        </el-radio-group>
      </td>
    </tr>

    <tr>
      <td colspan="2">家属签字</td>
      <td>责任护士签字</td>
    </tr>
  </table>
  <div class="box">
    <div class="item">
      <div class="label" style="width: 340px">Situation 现状</div>
      <div class="content">
        <div class="row">
          诊断：
          <el-input v-model="form.zd" class="bottomLine" style="width: 360px"></el-input>
        </div>
        <div class="row">
          拟手术名称：
          <el-input v-model="form.operateName" class="bottomLine" style="width: 320px"></el-input>
        </div>
      </div>
    </div>
    <div class="item">
      <div>
        <div class="flex bottomLine">
          <div class="txtCenter cellPadding w-392">Background 背景</div>
          <div class="txtCenter cellPadding w-244 leftLine">Assessmen 评估</div>
        </div>
        <div class="flex bottomLine">
          <div class="w-392 cellPadding">
            <div class="flex">
              体重：
              <el-input v-model="form.weight"></el-input>
              KG
              <span class="space"></span>
              <el-checkbox-group v-model="form.bed">
                <el-checkbox label="卧床"></el-checkbox>
              </el-checkbox-group>
            </div>
            <div class="flex" style="justify-content: space-between">
              <div>
                <div class="flex">
                  过敏史：
                  <el-radio-group v-model="form.gms">
                    <el-radio label="无"></el-radio>
                    <el-radio label="有"
                      >有<el-input
                        v-model="form.gmsContent"
                        class="bottomLine"
                        style="width: 90px"
                      ></el-input
                    ></el-radio>
                  </el-radio-group>
                </div>
                <div class="flex">
                  禁食：
                  <el-radio-group v-model="form.jinshi">
                    <el-radio label="是"></el-radio>
                    <el-radio label="不需要"></el-radio>
                  </el-radio-group>
                </div>
                <div class="flex">
                  备血：
                  <el-radio-group v-model="form.beixue">
                    <el-radio label="无"></el-radio>
                    <el-radio label="有"></el-radio>
                  </el-radio-group>
                </div>
                <div class="flex">
                  备皮：
                  <el-radio-group v-model="form.beipi">
                    <el-radio label="不需要"></el-radio>
                    <el-radio label="有"></el-radio>
                  </el-radio-group>
                </div>
                <div class="flex">
                  手术标记：
                  <el-radio-group v-model="form.biaoji">
                    <el-radio label="是"></el-radio>
                    <el-radio label="不需要"></el-radio>
                  </el-radio-group>
                </div>
              </div>
            </div>

            <div class="flex">
              术前用药：
              <el-radio-group v-model="form.yongyao">
                <el-radio label="无"></el-radio>
                <el-radio label="已执行"></el-radio>
              </el-radio-group>
            </div>
            <div class="flex">
              多重耐药菌：
              <el-radio-group v-model="form.naiyaojun">
                <el-radio label="无"></el-radio>
                <el-radio label="有"
                  >有<el-input
                    v-model="form.naiyaojunContent"
                    class="bottomLine"
                    style="width: 100px"
                  ></el-input
                ></el-radio>
              </el-radio-group>
            </div>
            <div class="flex">
              压疮风险评估：
              <el-radio-group v-model="form.pinggu">
                <el-radio label="高危"></el-radio>
                <el-radio label="非高危"></el-radio>
              </el-radio-group>
            </div>
          </div>
          <div class="w-244 leftLine">
            <div class="cellPadding bottomLine">
              <div class="flex">
                身份确认：
                <el-checkbox-group v-model="form.shenfen">
                  <el-checkbox label="1"><span style="opacity: 0">1</span></el-checkbox>
                </el-checkbox-group>
              </div>
              <div class="flex">
                转运等级：
                <el-radio-group v-model="form.level">
                  <el-radio label="A"></el-radio>
                  <el-radio label="B"></el-radio>
                  <el-radio label="C"></el-radio>
                </el-radio-group>
              </div>
            </div>
            <div class="flex cellPadding bottomLine">
              <div style="flex-shrink: 0">意识：</div>
              <el-radio-group v-model="form.yishi">
                <el-radio label="清醒"></el-radio>
                <el-radio label="嗜睡"></el-radio>
                <el-radio label="模糊"></el-radio>
                <el-radio label="昏睡"></el-radio>
                <el-radio label="昏迷"></el-radio>
              </el-radio-group>
            </div>
            <div class="cellPadding">
              <div>
                生命体征：T:
                <el-input v-model="form.vitalSignst" style="width: 30px"></el-input>
                ℃
                <span style="padding-left: 12px"></span>
                R:
                <el-input v-model="form.vitalSignsr" style="width: 30px"></el-input>
                次/分
              </div>
              <div>
                BP:
                <el-input v-model="form.vitalSignsbp1" style="width: 26px"></el-input>
                /
                <el-input v-model="form.vitalSignsbp2" style="width: 26px"></el-input>
                mmHg
                <span style="padding-left: 10px"></span>
                P:
                <el-input v-model="form.vitalSignsp" style="width: 26px"></el-input>
                次/分
              </div>
              <div>
                疼痛：
                <el-input v-model="form.vitalSignspain"></el-input>
                分
              </div>
            </div>
          </div>
        </div>
        <div class="flex bottomLine">
          <div class="flex w-392">
            <div class="label cellPadding" style="width: 230px">
              特殊检查结果（乙肝、丙肝、HIV、梅毒等传染病）
            </div>
            <div class="cellPadding">
              <el-radio-group v-model="form.teshu">
                <el-radio label="阴性"></el-radio>
                <el-radio label="未查"></el-radio>
                <el-radio label="未归"></el-radio>
                <el-radio label="阳性"
                  >阳性<el-input
                    v-model="form.yangxingContent"
                    class="bottomLine"
                    style="width: 100px"
                  ></el-input
                ></el-radio>
              </el-radio-group>
            </div>
          </div>
          <div class="cellPadding leftLine w-244">
            <div class="flex">
              药品：
              <el-radio-group v-model="form.yaopin">
                <el-radio label="无"></el-radio>
                <el-radio label="有"
                  >有<el-input
                    v-model="form.yaopinContent"
                    class="bottomLine"
                    style="width: 100px"
                  ></el-input
                ></el-radio>
              </el-radio-group>
            </div>
            <div class="flex">
              血制品：
              <el-radio-group v-model="form.xuezhipin">
                <el-radio label="无"></el-radio>
                <el-radio label="有"
                  >有<el-input
                    v-model="form.xuezhipinContent"
                    class="bottomLine"
                    style="width: 50px"
                  ></el-input
                ></el-radio>
              </el-radio-group>
              <el-checkbox-group v-model="form.guancha">
                <el-checkbox label="观察"></el-checkbox>
              </el-checkbox-group>
            </div>
          </div>
        </div>
        <div class="flex bottomLine">
          <div class="flex w-392">
            <div class="label cellPadding" style="width: 230px">
              <div>
                手术物品（病历、手术风险评估单、知情同意书、材料使用告知、影像学资料（<el-input
                  v-model="form.ziliaoNum"
                  class="bottomLine"
                  style="width: 40px"
                ></el-input
                >张）、沙袋等）
              </div>
            </div>
            <div class="cellPadding">
              <el-radio-group v-model="form.wupin">
                <el-radio label="确认"></el-radio>
                <el-radio label="其他"
                  >其他<el-input
                    v-model="form.wupinContent"
                    class="bottomLine"
                    style="width: 100px"
                  ></el-input
                ></el-radio>
              </el-radio-group>
            </div>
          </div>
          <div class="leftLine w-244 cellPadding">
            <div>皮肤情况：</div>
            <div>
              <el-radio-group v-model="form.skin">
                <el-radio label="完整"></el-radio>
                <el-radio label="压力性损伤"
                  >压力性损伤：<el-input
                    v-model="form.skinYalixing"
                    class="bottomLine"
                    style="width: 100px"
                  ></el-input
                ></el-radio>
                <el-radio label="其他"
                  >其他：<el-input
                    v-model="form.skinQita"
                    class="bottomLine"
                    style="width: 100px"
                  ></el-input
                ></el-radio>
              </el-radio-group>
            </div>
          </div>
        </div>
        <div class="flex">
          <div class="flex w-392">
            <div class="label cellPadding" style="width: 230px">
              手术事宜（排空膀胱、皮肤准备、手术标记、除去内衣裤、女患者无月经来潮、无佩戴饰品及假牙、无咳嗽发热等不适、情绪稳定、运送路线等）
            </div>
            <div class="cellPadding">
              <el-radio-group v-model="form.shiyi">
                <el-radio label="确认"></el-radio>
                <el-radio label="其他"
                  >其他<el-input
                    v-model="form.shiyiContent"
                    class="bottomLine"
                    style="width: 100px"
                  ></el-input
                ></el-radio>
              </el-radio-group>
            </div>
          </div>
          <div class="w-244 leftLine cellPadding">
            <div>管道：</div>
            <div>
              <el-radio-group v-model="form.pipe">
                <el-radio label="无"></el-radio>
                <el-radio label="外周静脉"></el-radio>
                <el-radio label="CVC"></el-radio>
                <el-radio label="PICC"></el-radio>
                <el-radio label="胃管"></el-radio>
                <el-radio label="导尿管"></el-radio>
                <el-radio label="气管插管"></el-radio>
                <el-radio label="引流管"
                  >引流管<el-input
                    v-model="form.pipeYinliuNum"
                    class="bottomLine"
                    style="width: 50px"
                  ></el-input
                  >根</el-radio
                >
                <el-radio label="其他"
                  >其他导管：<el-input
                    v-model="form.pipeQitaNum"
                    class="bottomLine"
                    style="width: 30px"
                  ></el-input
                  >根：<el-input
                    v-model="form.pipeQita"
                    class="bottomLine"
                    style="width: 80px"
                  ></el-input
                ></el-radio>
              </el-radio-group>
            </div>
          </div>
        </div>
        <div style="width: 392px"></div>
        <div class="leftLine" style="width: 244px"></div>
      </div>
      <div class="leftLine" style="width: 170px">
        <div class="txtCenter bottomLine cellPadding">Recommendation 建议</div>
        <div class="cellPadding">
          <el-radio-group v-model="form.jianyi">
            <el-radio label="无"></el-radio>
            <el-radio label="有"
              >有<el-input
                v-model="form.jianyiContent"
                class="bottomLine"
                style="width: 100px"
              ></el-input
            ></el-radio>
          </el-radio-group>
        </div>
      </div>
    </div>
    <div class="item">
      <div class="w-392 cellPadding">
        <div class="flex">
          转出科室：
          <el-input v-model="form.zcDept" style="width: 100px"></el-input>
          签名：
          <el-input v-model="form.zcSign"></el-input>
        </div>
        <div class="flex">
          时间：
          <el-input v-model="form.year" class="center"></el-input>
          年
          <el-input v-model="form.month" class="center"></el-input>
          月
          <el-input v-model="form.day" class="center"></el-input>
          日
          <el-input v-model="form.hour" class="center"></el-input>
          时
          <el-input v-model="form.minute" class="center"></el-input>
          分
        </div>
      </div>
      <div class="leftLine cellPadding">
        <div class="flex">
          转入科室：
          <el-input v-model="form.zrDept" style="width: 100px"></el-input>
          签名：
          <el-input v-model="form.zrSign"></el-input>
        </div>
        <div class="flex">
          时间：
          <el-input v-model="form.year" class="center"></el-input>
          年
          <el-input v-model="form.month" class="center"></el-input>
          月
          <el-input v-model="form.day" class="center"></el-input>
          日
          <el-input v-model="form.hour" class="center"></el-input>
          时
          <el-input v-model="form.minute" class="center"></el-input>
          分
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { cloneDeep } from 'lodash-unified'
import { defineComponent, reactive, toRefs, watch } from 'vue'

export default defineComponent({
  props: {
    form: {
      type: Object,
      default: () => ({}),
    },
  },
  setup(props) {
    const state = reactive({
      form: {
        zd: '',
        operateName: '',
        weight: '',
        bed: '',
        gms: '',
        gmsContent: '',
        jinshi: '',
        beixue: '',
        beipi: '',
        biaoji: '',
        yongyao: '',
        naiyaojun: '',
        naiyaojunContent: '',
        pinggu: '',
        shenfen: '',
        level: '',
        yishi: '',
        vitalSignsbp1: '',
        vitalSignsbp2: '',
        vitalSignst: '',
        vitalSignsr: '',
        bp1: '',
        bp2: '',
        ziliaoNum: '',
        vitalSignsp: '',
        vitalSignspain: '',
        teshu: '',
        yangxingContent: '',
        yaopin: '',
        yaopinContent: '',
        xuezhipin: '',
        xuezhipinContent: '',
        guancha: '',
        wupin: '',
        wupinContent: '',
        skin: '',
        skinYalixing: '',
        skinQita: '',
        shiyi: '',
        shiyiContent: '',
        pipe: '',
        pipeYinliuNum: '',
        pipeQitaNum: '',
        pipeQita: '',
        situation: { zd: '', operateName: '' },
      },
    })

    function getParams() {
      return state.form
    }

    watch(
      () => props.form,
      (val) => {
        if (val) {
          state.form = cloneDeep(val)
        }
      },
      {
        immediate: true,
        deep: true,
      },
    )

    return {
      ...toRefs(state),
      getParams,
    }
  },
})
</script>

<style lang="scss" scoped>
@import '@/views/doc/styles/doc-common.scss';
@import '@/views/doc/styles/doc-fix.scss';
$border: 1px solid #000;
.paddL {
  padding-left: 12px;
}
.flexBox {
  display: flex;
  justify-content: start;
  align-items: center;
}

.margL {
  margin-left: 40px;
}

.my-table {
  border-collapse: collapse;
  /* 重要：合并边框 */
  width: 100%;
  margin-top: 18px;
}

.tear-line {
  padding: 5px;
  border-top: 1px dashed #000;
  text-align: center;
  font-style: italic;
}

.my-table,
.my-table th,
.my-table td {
  border: 1px solid #000;
  text-align: center;
  /* 设置边框 */
  // padding: 8px; /* 添加内边距 */
}

.box {
  border: 1px solid #000;
  margin-top: 18px;

  .item {
    border-top: 1px solid #000;
    display: flex;

    &:first-child {
      border-top: none;
    }

    .label {
      border-right: 1px solid #000;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .content {
      padding: 6px 20px;

      .row {
        display: flex;
        margin-top: 10px;
        white-space: nowrap;

        &:first-child {
          margin-top: 0;
        }
      }
    }

    .flex {
      display: flex;
    }
  }
}

.bottomLine {
  border-bottom: 1px solid #000;
}

.leftLine {
  border-left: 1px solid #000;
}

.checkItem {
  padding: 6px 10px;
}

.txtCenter {
  text-align: center;
}

.cellPadding {
  padding: 4px 6px;
}

.space {
  display: inline-block;
  width: 30px;
}

.space2 {
  display: inline-block;
  width: 16px;
}

.w-392 {
  width: 392px;
}

.w-244 {
  width: 244px;
}

::v-deep {
  .el-radio-group,
  .el-checkbox-group {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    .el-radio {
      display: flex;
      align-items: center;
    }
  }

  .el-input {
    width: 50px;
  }

  .el-input .el-input__inner {
    height: 20px;
    text-align: left;
  }

  .el-input.center .el-input__inner {
    text-align: center;
  }

  .el-input.is-disabled .el-input__inner {
    background-color: #fff;
  }

  input:disabled {
    color: #000;
    background: #fff;
  }
}
</style>
